<template>
  <div>
    <el-dialog :visible.sync="dialog.search" :close-on-click-modal="false" title="高级搜索" width="80%" append-to-body>
      <el-form ref="searchForm" :model="searchForm" label-width="120px">
        <el-row>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
	<el-form-item label="父菜单名称" prop="parentMetaTitle" label-for="parentMetaTitle">
	<el-input v-model="searchForm.parentMetaTitle" element-id="parentMetaTitle" placeholder="请输入父菜单名称" clearable @keyup.enter.native="searchOkDialog"/>
</el-form-item>
</el-col><el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
	<el-form-item label="父菜单是否可用" prop="parentIsActive">
              <el-select
                v-model="searchForm.parentIsActive"
                placeholder="请选择父菜单是否可用"
                clearable
                style="width: 100%;"
              >
                <el-option
                  v-for="item in selects.parentIsActiveSelect"
                  :value="item.value"
                  :key="item.value"
                  :label="item.displayValue"
                ></el-option>
              </el-select>

</el-form-item>
</el-col><el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
	<el-form-item label="菜单路径" prop="path" label-for="path">
	<el-input v-model="searchForm.path" element-id="path" placeholder="请输入菜单路径" clearable @keyup.enter.native="searchOkDialog"/>
</el-form-item>
</el-col><el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
	<el-form-item label="英文名称" prop="name" label-for="name">
	<el-input v-model="searchForm.name" element-id="name" placeholder="请输入英文名称" clearable @keyup.enter.native="searchOkDialog"/>
</el-form-item>
</el-col><el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
	<el-form-item label="中文名称" prop="metaTitle" label-for="metaTitle">
	<el-input v-model="searchForm.metaTitle" element-id="metaTitle" placeholder="请输入中文名称" clearable @keyup.enter.native="searchOkDialog"/>
</el-form-item>
</el-col><el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
	<el-form-item label="重定向地址" prop="redirect" label-for="redirect">
	<el-input v-model="searchForm.redirect" element-id="redirect" placeholder="请输入重定向地址" clearable @keyup.enter.native="searchOkDialog"/>
</el-form-item>
</el-col><el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
	<el-form-item label="组件" prop="component" label-for="component">
	<el-input v-model="searchForm.component" element-id="component" placeholder="请输入组件" clearable @keyup.enter.native="searchOkDialog"/>
</el-form-item>
</el-col><el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
	<el-form-item label="是否隐藏" prop="hidden">
              <el-select
                v-model="searchForm.hidden"
                placeholder="请选择是否隐藏"
                clearable
                style="width: 100%;"
              >
                <el-option
                  v-for="item in selects.hiddenSelect"
                  :value="item.value"
                  :key="item.value"
                  :label="item.displayValue"
                ></el-option>
              </el-select>

</el-form-item>
</el-col><el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
	<el-form-item label="总是显示" prop="alwaysShow">
              <el-select
                v-model="searchForm.alwaysShow"
                placeholder="请选择总是显示"
                clearable
                style="width: 100%;"
              >
                <el-option
                  v-for="item in selects.alwaysShowSelect"
                  :value="item.value"
                  :key="item.value"
                  :label="item.displayValue"
                ></el-option>
              </el-select>

</el-form-item>
</el-col><el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
	<el-form-item label="菜单图标" prop="metaIcon" label-for="metaIcon">
	<el-input v-model="searchForm.metaIcon" element-id="metaIcon" placeholder="请输入菜单图标" clearable @keyup.enter.native="searchOkDialog"/>
</el-form-item>
</el-col><el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
	<el-form-item label="可访问角色" prop="metaRoles" label-for="metaRoles">
	<el-input v-model="searchForm.metaRoles" element-id="metaRoles" placeholder="请输入可访问角色" clearable @keyup.enter.native="searchOkDialog"/>
</el-form-item>
</el-col><el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
	<el-form-item label="是否隐藏面包屑" prop="metaBreadcrumb">
              <el-select
                v-model="searchForm.metaBreadcrumb"
                placeholder="请选择是否隐藏面包屑"
                clearable
                style="width: 100%;"
              >
                <el-option
                  v-for="item in selects.metaBreadcrumbSelect"
                  :value="item.value"
                  :key="item.value"
                  :label="item.displayValue"
                ></el-option>
              </el-select>

</el-form-item>
</el-col><el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
	<el-form-item label="是否固定在TagView" prop="metaAffix">
              <el-select
                v-model="searchForm.metaAffix"
                placeholder="请选择是否固定在TagView"
                clearable
                style="width: 100%;"
              >
                <el-option
                  v-for="item in selects.metaAffixSelect"
                  :value="item.value"
                  :key="item.value"
                  :label="item.displayValue"
                ></el-option>
              </el-select>

</el-form-item>
</el-col><el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
	<el-form-item label="是否缓存" prop="metaNoCache">
              <el-select
                v-model="searchForm.metaNoCache"
                placeholder="请选择是否缓存"
                clearable
                style="width: 100%;"
              >
                <el-option
                  v-for="item in selects.metaNoCacheSelect"
                  :value="item.value"
                  :key="item.value"
                  :label="item.displayValue"
                ></el-option>
              </el-select>

</el-form-item>
</el-col><el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
	<el-form-item label="菜单等级" prop="menuLevel">
              <el-select
                v-model="searchForm.menuLevel"
                placeholder="请选择菜单等级"
                clearable
                style="width: 100%;"
              >
                <el-option
                  v-for="item in selects.menuLevelSelect"
                  :value="item.value"
                  :key="item.value"
                  :label="item.displayValue"
                ></el-option>
              </el-select>
  </el-form-item>
</el-col><el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
	<el-form-item label="菜单排序"><el-row>
	<el-col :span="11">
	<el-form-item prop="menuOrderMin">
	<el-input-number v-model="searchForm.menuOrderMin" placeholder="请输入开始菜单排序" style="width: 100%;" @keyup.enter.native="searchOkDialog"/>
</el-form-item>
</el-col>
	<el-col :span="2" style="text-align: center">-</el-col>
	<el-col :span="11">
	<el-form-item prop="menuOrderMax">
	<el-input-number v-model="searchForm.menuOrderMax" placeholder="请输入结束菜单排序" style="width: 100%;" @keyup.enter.native="searchOkDialog"/>
</el-form-item>
</el-col>
</el-row>
</el-form-item>
</el-col><el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
	<el-form-item label="菜单说明" prop="description" label-for="description">
	<el-input v-model="searchForm.description" element-id="description" placeholder="请输入菜单说明" clearable @keyup.enter.native="searchOkDialog"/>
</el-form-item>
</el-col><el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
	<el-form-item label="版本号"><el-row>
	<el-col :span="11">
	<el-form-item prop="versionMin">
	<el-input-number v-model="searchForm.versionMin" placeholder="请输入开始版本号" style="width: 100%;" @keyup.enter.native="searchOkDialog"/>
</el-form-item>
</el-col>
	<el-col :span="2" style="text-align: center">-</el-col>
	<el-col :span="11">
	<el-form-item prop="versionMax">
	<el-input-number v-model="searchForm.versionMax" placeholder="请输入结束版本号" style="width: 100%;" @keyup.enter.native="searchOkDialog"/>
</el-form-item>
</el-col>
</el-row>
</el-form-item>
</el-col><el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
	<el-form-item label="创建时间"><el-row>
	<el-col :span="11">
	<el-form-item prop="createTimeMin">
	<el-date-picker type="datetime" v-model="searchForm.createTimeMin" placeholder="请输入开始创建时间" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%;" clearable></el-date-picker>
</el-form-item>
</el-col>
	<el-col :span="2" style="text-align: center">-</el-col>
	<el-col :span="11">
	<el-form-item prop="createTimeMax">
	<el-date-picker type="datetime" v-model="searchForm.createTimeMax" placeholder="请输入结束创建时间" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%;" clearable></el-date-picker>
</el-form-item>
</el-col>
</el-row>
</el-form-item>
</el-col><el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
	<el-form-item label="更新时间"><el-row>
	<el-col :span="11">
	<el-form-item prop="updateTimeMin">
	<el-date-picker type="datetime" v-model="searchForm.updateTimeMin" placeholder="请输入开始更新时间" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%;" clearable></el-date-picker>
</el-form-item>
</el-col>
	<el-col :span="2" style="text-align: center">-</el-col>
	<el-col :span="11">
	<el-form-item prop="updateTimeMax">
	<el-date-picker type="datetime" v-model="searchForm.updateTimeMax" placeholder="请输入结束更新时间" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%;" clearable></el-date-picker>
</el-form-item>
</el-col>
</el-row>
</el-form-item>
</el-col><el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
	<el-form-item label="是否可用" prop="isActive">
              <el-select
                v-model="searchForm.isActive"
                placeholder="请选择是否可用"
                clearable
                style="width: 100%;"
              >
                <el-option
                  v-for="item in selects.isActiveSelect"
                  :value="item.value"
                  :key="item.value"
                  :label="item.displayValue"
                ></el-option>
              </el-select>

</el-form-item>
</el-col>
        </el-row>
      </el-form>
      <div slot="footer">
        <el-button @click="cancelDialog">取消</el-button>
        <el-button type="primary" @click="searchOkDialog" :loading="loading.search">搜索</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as utils from '@/utils/utils'
import * as ResponseStatus from '@/utils/response-status'
export default {
  name: 'SysMenuSearch',
  data() {
    return {
      dialog: {
        search: false
      },
      loading: {
        search: false
      },
      searchForm: {
        pageNo: 1,
        pageSize: 10,
        sortColumn: undefined,
        sortOrder: undefined,
        id: undefined,
idMin: undefined, 
idMax: undefined, 
parentId: undefined,
parentIdMin: undefined, 
parentIdMax: undefined, 
parentMetaTitle: undefined,
parentIsActive: undefined,
parentIsActiveMin: undefined, 
parentIsActiveMax: undefined, 
path: undefined,
name: undefined,
metaTitle: undefined,
redirect: undefined,
component: undefined,
hidden: undefined,
hiddenMin: undefined, 
hiddenMax: undefined, 
alwaysShow: undefined,
alwaysShowMin: undefined, 
alwaysShowMax: undefined, 
metaIcon: undefined,
metaRoles: undefined,
metaBreadcrumb: undefined,
metaBreadcrumbMin: undefined, 
metaBreadcrumbMax: undefined, 
metaAffix: undefined,
metaAffixMin: undefined, 
metaAffixMax: undefined, 
metaNoCache: undefined,
metaNoCacheMin: undefined, 
metaNoCacheMax: undefined, 
menuLevel: undefined,
menuLevelMin: undefined, 
menuLevelMax: undefined, 
menuOrder: undefined,
menuOrderMin: undefined, 
menuOrderMax: undefined, 
description: undefined,
version: undefined,
versionMin: undefined, 
versionMax: undefined, 
createTime: undefined,
createTimeMin: undefined, 
createTimeMax: undefined, 
updateTime: undefined,
updateTimeMin: undefined, 
updateTimeMax: undefined, 
isActive: undefined,
isActiveMin: undefined, 
isActiveMax: undefined, 

      },
      dataDictCodes: ['YES_NO', 'SYS_MENU_LEVEL'],
      selects: {
        parentIsActiveSelect: [],
hiddenSelect: [],
alwaysShowSelect: [],
metaBreadcrumbSelect: [],
metaAffixSelect: [],
metaNoCacheSelect: [],
menuLevelSelect: [],
isActiveSelect: [],

      }
    }
  },
  computed: {},
  mounted() {
    this.initDataDict()
  },
  methods: {
    initDataDict() {
    utils
      .getDataDict(this.dataDictCodes)
      .then(response => {
        if (response) {
          utils.getSelectDictItems({
            mainComponent: this,
            dataDictItems: response,
            dictCode: 'YES_NO',
            formProp: 'parentIsActive',
            dataProp: 'parentIsActiveSelect'
          })
utils.getSelectDictItems({
            mainComponent: this,
            dataDictItems: response,
            dictCode: 'YES_NO',
            formProp: 'hidden',
            dataProp: 'hiddenSelect'
          })
utils.getSelectDictItems({
            mainComponent: this,
            dataDictItems: response,
            dictCode: 'YES_NO',
            formProp: 'alwaysShow',
            dataProp: 'alwaysShowSelect'
          })
utils.getSelectDictItems({
            mainComponent: this,
            dataDictItems: response,
            dictCode: 'YES_NO',
            formProp: 'metaBreadcrumb',
            dataProp: 'metaBreadcrumbSelect'
          })
utils.getSelectDictItems({
            mainComponent: this,
            dataDictItems: response,
            dictCode: 'YES_NO',
            formProp: 'metaAffix',
            dataProp: 'metaAffixSelect'
          })
utils.getSelectDictItems({
            mainComponent: this,
            dataDictItems: response,
            dictCode: 'YES_NO',
            formProp: 'metaNoCache',
            dataProp: 'metaNoCacheSelect'
          })
utils.getSelectDictItems({
            mainComponent: this,
            dataDictItems: response,
            dictCode: 'SYS_MENU_LEVEL',
            formProp: 'menuLevel',
            dataProp: 'menuLevelSelect'
          })
utils.getSelectDictItems({
            mainComponent: this,
            dataDictItems: response,
            dictCode: 'YES_NO',
            formProp: 'isActive',
            dataProp: 'isActiveSelect'
          })

        }
      })
      .catch(error => {
        console.log(error)
      })
    },
    resetForm(excludeProps) {
      for (let key in this.searchForm) {
        if (excludeProps && excludeProps.includes(key)) {
          continue
        }
        this.searchForm[key] = undefined
      }
    },
    cancelDialog() {
      this.dialog.search = false
    },
    searchOkDialog() {
      this.dialog.search = false
      this.$emit('searchTable', true)
    }
  }
}
</script>

<style>
</style>